<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言表</title>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Roboto:400,600);

        body {
            font-family: "Roboto", sans-serif;
            height: 100%;
            margin-bottom: 50px;
            background: cadetblue;
        }

        .container {
            display: flex;
            justify-content: center;
        }

        h4 {
            margin: 10px 30px;
            text-transform: capitalize;
        }

        span.date {
            font-weight: 300;
            font-size: 12px;
            float: right;
            margin-right: 10px;
        }

        hr {
            border: 0;
            height: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        .comment-box {
            width: 85%;
            margin-top: 50px;
            background: #fff;
            padding: 5px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            border-radius: 5px;
        }

        .comment-box p {
            margin: 0 30px 15px;
            font-weight: 300;
            color: #333;
            word-wrap: break-word;
            background: #eee;
            padding: 2rem 1rem;
        }

        .header {
            margin: 15px 20px;
            font-size: 27px;
            font-weight: 600;
        }

        form {
            margin: 10px 10px 30px 10px;
        }

        form ::-webkit-input-placeholder {
            color: #ccc;
            font-weight: 300;
        }

        input[type="text"],
        textarea {
            margin: 5px 10px;
            outline: none;
            background: #efefef;
            border: 0;
            padding: 10px;
            border-radius: 5px;
        }

        textarea {
            resize: none;
            width: 85%;
        }

        input[type="text"] {
            width: 50%;
            margin-bottom: 15px;
        }

        button {
            margin: 12px 0 0 10px;
            border: 0;
            color: #fff;
            background: #298d9f;
            padding: 12px 20px 12px 20px;
            transition: all 0.2s ease;
            border-radius: 5px;
        }

        button:hover {
            background: #175763;
        }

        button.close {
            background-color: #28256b;
        }

        textarea:disabled,
        [type="text"]:disabled,
        button:disabled {
            background-color: gray;
            cursor: not-allowed;
        }

        button:disabled:hover {
            background-color: gray;
        }

        textarea:disabled,
        [type="text"]:disabled,
        button:disabled {
            background-color: gray;
            cursor: not-allowed;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="comment-box">
            <button class="close">关闭留言</button>
            <div class="comment-form">
                <div class="header">留言板</div>
                <!-- <form action="#"> -->
                <div>
                    <input type="text" id="name" placeholder="输入您的姓名..." />
                </div>
                <div>
                    <textarea id="comment" rows="3" cols="30" placeholder="输入您的留言..."></textarea>
                </div>
                <button id="btn-post">留言</button>
                <!-- </form> -->
            </div>
            <div>
                <h4 class="header">留言列表</h4>
                <div id="comments">
                    
              <!-- <hr />
              <h4>
                <span>姓名</span>
                <span class="date">日期</span>
              </h4>
              <p>留言内容1</p> -->
                </div>
            </div>
        </div>
    </div>


    <script>

        const comments = [
            {
                name: "Danny",
                comment:
                    "Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
                time: "Thu Jan 12 2022",
            },
            {
                name: "Jackson",
                comment: "Lorem Ipsum dolor sit amet, consectetur adipiscing elit",
                time: "Thu Jan 11 2022",
            },
        ];


        const commentsBox = document.querySelector('#comments')
        const nameInput = document.querySelector('#name')
        const commentInput = document.querySelector('#comment')
        const btnSubmit = document.querySelector('#btn-post')
        const btnClose = document.querySelector('.close')


        renderComment()

        function renderComment() {
            commentsBox.innerHTML = '';
            comments.forEach((item) => {

                commentsBox.insertAdjacentHTML('beforeend',
                    `
        <hr />
              <h4>
                <span>${item.name}</span>
                <span class="date">${item.time}</span>
              </h4>
              <p>${item.comment}</p>
        `)

            })

        }

        let isClosed = false
        btnClose.onclick = function () {
            if (isClosed) {
                btnClose.innerHTML = "关闭留言"
                // console.log('关闭状态');
            } else {
                btnClose.innerHTML = "开启留言"
                // console.log('开启状态');
            }

            nameInput.disabled = !nameInput.disabled
            commentInput.disabled = !commentInput.disabled
            btnSubmit.disabled = !btnSubmit.disabled

            isClosed = !isClosed
        }

        btnSubmit.onclick = function () {
            // 正则表达式
            let nameStr = nameInput.value.replace(/<(\/?\w+)>/g, "&lt;$1&gt;");
            let commentStr = commentInput.value.replace(/<(\/?\w+)>/g, "&lt;$1&gt;");

            comments.unshift({
                name: nameStr,
                comment: commentStr,
                time: new Date(),
            })
            renderComment()
        }



    </script>
</body>

</html>